<!DOCTYPE html>
<html>
<head>
    <title>TEST - 注册</title>
    <!-- 引入 Bootstrap 样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        /* 页面整体布局 */
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            position: relative;
        }

        /* 背景图容器 */
        .background-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('/static/images/f1.jpg') no-repeat center center;
            background-size: cover;
            z-index: 1;
        }

        /* 渐变遮罩 - 只作用于背景图 */
        .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.25) 20%,
                rgba(255, 255, 255, 0.5) 40%,
                rgba(255, 255, 255, 1) 90%
            );
            z-index: 2;
        }

        /* 内容容器 - 包含注册表单 */
        .content-container {
            position: relative;
            z-index: 3;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            min-height: 100vh;
            padding: 40px 5%;
        }

        /* 注册表单容器 - 缩小至原尺寸的80% */
        .register-container {
            max-width: 560px; /* 700px * 0.8 = 560px */
            width: 100%;
            padding: 48px 56px; /* 60px*0.8=48px, 70px*0.8=56px */
            background-color: rgba(255, 255, 255, 0.55);
            border-radius: 16px; /* 20px * 0.8 = 16px */
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow:
                0 8px 24px rgba(0, 0, 0, 0.15), /* 按比例缩小阴影 */
                inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            font-size: 1rem; /* 轻微缩小字体 */
            position: relative;
            overflow: hidden;
        }

        /* 顶部条纹装饰 */
        .register-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px; /* 按比例缩小 */
            background: linear-gradient(90deg, #0d6efd, #6610f2, #20c997);
        }

        /* 标题样式 */
        .register-container h2 {
            text-align: center;
            margin-bottom: 40px; /* 50px * 0.8 = 40px */
            color: #2d3436;
            font-size: 1.8rem; /* 2.2rem * 0.8 ≈ 1.8rem */
            font-weight: 700;
            position: relative;
            padding-bottom: 12px; /* 按比例缩小 */
        }

        /* 标题下方装饰线 */
        .register-container h2::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 64px; /* 80px * 0.8 = 64px */
            height: 3px; /* 按比例缩小 */
            background-color: #0d6efd;
            border-radius: 2px;
        }

        /* 表单图标容器（优化图标显示） */
        .input-group {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 14px; /* 微调位置增强清晰度 */
            top: 50%;
            transform: translateY(-50%);
            color: #495057; /* 加深图标颜色增强对比度 */
            font-size: 1.3rem; /* 适当放大图标 */
            z-index: 4; /* 确保图标在输入框之上 */
            opacity: 0.9; /* 提升不透明度 */
        }

        /* 表单元素样式 */
        .form-control {
            border-radius: 8px; /* 10px * 0.8 = 8px */
            border: 1px solid #ced4da;
            padding: 12px 15px 12px 50px; /* 按比例缩小内边距 */
            font-size: 1.05rem;
            height: auto;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.9); /* 提高输入框背景透明度增强图标对比 */
        }

        /* 输入框交互效果 */
        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
            outline: none;
            transform: translateY(-2px);
        }

        .mb-3 {
            margin-bottom: 24px !important; /* 30px * 0.8 = 24px */
        }

        .form-label {
            margin-bottom: 10px;
            font-weight: 500;
            color: #343a40; /* 加深标签颜色 */
            font-size: 1.05rem;
        }

        /* 按钮样式 */
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
            padding: 12px 0; /* 15px * 0.8 = 12px */
            font-size: 1.1rem; /* 按比例缩小 */
            font-weight: 600;
            border-radius: 8px; /* 10px * 0.8 = 8px */
            transition: all 0.3s ease;
            margin-top: 12px;
        }

        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(13, 110, 253, 0.2);
        }

        /* 底部链接区域 */
        .text-center {
            margin-top: 32px; /* 40px * 0.8 = 32px */
            font-size: 1rem;
            color: #495057;
        }

        .text-center a {
            color: #0d6efd;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

        .text-center a::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #0d6efd;
            transition: width 0.3s ease;
        }

        .text-center a:hover::after {
            width: 100%;
        }

        /* 提示信息样式 */
        .alert {
            padding: 14px; /* 18px * 0.8 ≈ 14px */
            border-radius: 8px;
            margin-bottom: 24px; /* 30px * 0.8 = 24px */
            font-size: 1rem;
        }

        /* 角落装饰（按比例缩小） */
        .decor-corner {
            position: absolute;
            width: 64px; /* 80px * 0.8 = 64px */
            height: 64px;
            opacity: 0.1;
            z-index: 0;
        }

        .top-left {
            top: -16px; /* 按比例缩小 */
            left: -16px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") no-repeat center;
        }

        .bottom-right {
            bottom: -16px;
            right: -16px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236610f2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E") no-repeat center;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <!-- 背景图 -->
    <div class="background-container"></div>

    <!-- 渐变遮罩 -->
    <div class="background-overlay"></div>

    <!-- 内容容器 -->
    <div class="content-container">
        <div class="register-container">
            <!-- 装饰性角落元素 -->
            <div class="decor-corner top-left"></div>
            <div class="decor-corner bottom-right"></div>

            <h2 class="text-center mb-4">注册新账号</h2>

            <!-- Flask 消息闪现 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <!-- 注册表单 -->
            <form method="POST" action="{{ url_for('register') }}">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <div class="input-group">
                        <i class="bi bi-person input-icon"></i> <!-- 用户图标 -->
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <div class="input-group">
                        <i class="bi bi-envelope input-icon"></i> <!-- 邮箱图标 -->
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <div class="input-group">
                        <i class="bi bi-lock input-icon"></i> <!-- 密码图标 -->
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-check-circle me-2"></i>完成注册
                </button>
            </form>

            <!-- 返回登录链接 -->
            <div class="mt-3 text-center">
                已有账号？<a href="{{ url_for('login') }}">返回登录</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>